<{extend name="Public:public0" /}>

<{block name="title"}>stylus<{/block}>

<{block name="sidebar"}><{include file="Public:sidebar-vuecli" /}><{/block}>

<{block name="content"}> 
<div class="content guide with-sidebar components-guide">
<h1>stylues</h1>
<h2 id="变量">
	<a href="#变量" class="headerlink" title="变量" data-scroll="">变量</a>
</h2>	
<code class="prettyprint linenums">//&nbsp;stylus变量&nbsp;约定以$开头<br/>$bgColor&nbsp;=&nbsp;#00bcd4<br/>$darkTextColor&nbsp;=&nbsp;#333<br/>$headerHeight&nbsp;=&nbsp;.86rem
</code>
<br>

<h2 id="@import引入">
	<a href="#@import引入" class="headerlink" title="@import引入" data-scroll="">@import引入</a>
</h2>	
<code class="prettyprint linenums">//&nbsp;&lt;style&gt;中<br/>@import&nbsp;'~stylesPath/varibles.styl'<br/>@import&nbsp;'~stylesPath/mixins.styl'<br/><br/>//&nbsp;其中&nbsp;stylesPath配置在&nbsp;build/webpack.base.conf.js<br/>resolve:&nbsp;{<br/>&nbsp;&nbsp;extensions:&nbsp;['.js',&nbsp;'.vue',&nbsp;'.json'],<br/>&nbsp;&nbsp;alias:&nbsp;{<br/>&nbsp;&nbsp;&nbsp;&nbsp;'vue$':&nbsp;'vue/dist/vue.esm.js',<br/>&nbsp;&nbsp;&nbsp;&nbsp;'@':&nbsp;resolve('src'),<br/>&nbsp;&nbsp;&nbsp;&nbsp;'stylesPath':&nbsp;resolve('src/assets/styles'),<br/>&nbsp;&nbsp;&nbsp;&nbsp;'common':&nbsp;resolve('src/common'),<br/>&nbsp;&nbsp;}<br/>},<br/><br/>//&nbsp;上面的import解析为:<br/>//&nbsp;@import&nbsp;'~@/assets/styles/varibles.styl'<br/>//&nbsp;@import&nbsp;'~@/assets/styles/mixins.styl'
</code>
<br>


<h2 id="特殊用法">
	<a href="#特殊用法" class="headerlink" title="特殊用法" data-scroll="">特殊用法</a>
</h2>
<blockquote>
	<div>使用padding-bottom 占据height空间</div>
</blockquote>
<code class="prettyprint linenums">.icons<br/>&nbsp;&nbsp;overflow:&nbsp;hidden<br/>&nbsp;&nbsp;width:&nbsp;100%<br/>&nbsp;&nbsp;height:&nbsp;0<br/>&nbsp;&nbsp;padding-bottom:&nbsp;50%&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;相对于width&nbsp;*/<br/>&nbsp;&nbsp;.icon<br/>&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;25%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;相对于父容器&nbsp;*/<br/>&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;0<br/>&nbsp;&nbsp;&nbsp;&nbsp;padding-bottom:&nbsp;25%&nbsp;&nbsp;/*&nbsp;相对于父容器&nbsp;好奇怪&nbsp;*/
</code>	


</div>

<{/block}>
